<template>
  <div class="settle">
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单结算"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 地址 -->
    <div class="address">
      <!-- 选择地址 -->
      <div class="edit" @click="showPopup">
        选择地址
        <van-icon name="arrow" />

        <!-- 选择自取、外卖 -->
        <div class="choice">
          <div
            class="choicebox"
            :class="nextindex === i ? 'next' : ''"
            v-for="(v, i) in choiceData"
            :key="i"
            @click="changechoice(i)"
          >
            {{ v.tit }}
          </div>
        </div>
      </div>

      <!-- 地址信息 -->
      <div class="data">
        <!-- 联系人 -->
        <div class="databox">
          <div class="name">{{ selectAddress.name }}</div>
          <div class="iphone">{{ selectAddress.tel }}</div>
          <div v-if="selectAddress.isDefault">
            <van-tag round type="primary">默认</van-tag>
          </div>
        </div>

        <!-- 住址 -->
        <div class="home">{{ selectAddress.address }}</div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="news">
      <div class="title">订单信息</div>

      <div v-for="(item, index) in initShowProData" :key="index">
        <van-card
          :num="item.count"
          :price="item.price"
          :desc="item.rule"
          :title="item.name"
          :thumb="item.small_img"
        />
      </div>

      <div class="showmore" v-if="!isShowMore" @click="showMoreProduct">
        显示更多商品信息
        <van-icon name="arrow-down" />
      </div>
    </div>

    <!-- 合计 -->
    <div class="total">
      <!-- 时间 -->
      <div class="time">{{ time }}</div>

      <!-- 计算 -->
      <div class="totalbox">
        <!-- 数量 -->
        <div class="quantity">共计{{ count }}件商品</div>

        <!-- 金额 -->
        <div class="money">
          总金额：<span>&yen;{{ total }}</span>
        </div>
      </div>

      <i class="circle circle-left"></i>
      <i class="circle circle-right"></i>
    </div>

    <van-button block round @click="pay">立即购买</van-button>

    <!-- 选择地址页面 -->
    <div>
      <van-popup
        v-model="show"
        round
        closeable
        position="bottom"
        :style="{ height: '50%' }"
        close-icon="close"
      >
        <div class="popup">选择地址</div>

        <div class="popupbox">
          <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="addAddress"
            @select="select"
          />
        </div>
      </van-popup>
    </div>

    <!-- 支付密码 -->
    <div class="password">
      <van-popup
        v-model="passwordshow"
        round
        closeable
        position="bottom"
        :style="{ height: '54%' }"
        close-icon="close"
      >
        <div class="tit">输入支付密码</div>

        <!-- 密码输入框 -->
        <van-password-input
          :value="userPassword"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />

        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="userPassword"
          :show="showKeyboard"
          @blur="passwordshow = false"
          @input="inputPassword"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "Settle",

  data() {
    return {
      // 选择
      choiceData: [{ tit: "自取" }, { tit: "外卖" }],
      nextindex: 0,

      // 是否显示选择地址页面
      show: false,

      chosenAddressId: "",

      //地址数据
      list: [],

      //选择地址
      selectAddress: {},

      //订单商品数据
      orderProData: [],

      //初始显示的3条商品数据
      initCount: 3,
      initShowProData: [],

      //是否显示更多商品数据
      isShowMore: false,

      //用户输入的密码
      userPassword: "",

      //预设密码
      password: "123456",

      //是否显示密码键盘
      showKeyboard: true,
      passwordshow: false,

      //结算时间
      time: "",

      //商品总数量
      count: 0,

      //订单总金额
      total: 0,
    };
  },

  created() {
    this.sids = JSON.stringify(this.$route.query.sids.split("-"));
    // 

    //获取当前时间
    this.getCurrentTime();

    // 获取地址数据
    this.getAddressData();

    this.getBuyProduct();
  },

  methods: {
    //获取当前时间
    getCurrentTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();

      this.time = yy + "." + mm + "." + dd + "  " + hh + ":" + mf + ":" + ss;
      // 
    },

    onClickLeft() {
      this.$router.push({ name: "Arrorder" });
    },

    // 切换自取、外卖
    changechoice(i) {
      if (this.nextindex === i) {
        return;
      }
      this.nextindex = i;
      // 
    },

    //显示选择地址页面
    showPopup() {
      this.show = true;
    },

    //获取地址数据
    getAddressData() {
      this.axios({
        method: "get",
        url: "/findAddress",
      })
        .then((res) => {
          // 

          //   this.$toast(res.data.msg);

          //如果未登录,跳转到登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          if (res.data.code === 20000) {
            res.data.result.forEach((v) => {
              v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
              v.isDefault = Boolean(v.isDefault);

              //查找默认数据
              if (v.isDefault) {
                this.selectAddress = v;
                this.chosenAddressId = v.id;
              }
            });

            this.list = res.data.result;
          }
        })
        .catch((err) => {
          
        });
    },

    //跳转新增地址页面
    addAddress() {
      this.$router.push({ name: "Addreceiving" });
    },

    //选择切换地址
    select(item) {
      this.chosenAddressId = item.id;

      this.selectAddress = item;

      this.show = false;
    },

    //获取购买商品数据
    getBuyProduct() {
      this.axios({
        method: "get",
        url: "/commitShopcart",
        params: {
          sids: this.sids,
        },
      })
        .then((res) => {
          // 

          //如果未登录,跳转到登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          if (res.data.code === 50000) {
            if (res.data.result.length === 0) {
              return this.$route.push({ name: "Order" });
            }

            res.data.result.forEach((v) => {
              this.count += v.count;
              this.total += v.count * v.price;
            });

            this.orderProData = res.data.result;
            // 

            this.initShowProData.push(
              ...this.orderProData.slice(0, this.initCount)
            );
            // 
            if (this.orderProData.length <= 3) {
              this.isShowMore = true;
            }
          }
        })
        .catch((err) => {
          
        });
    },

    //显示更多商品
    showMoreProduct() {
      this.initShowProData.push(...this.orderProData.slice(this.initCount));
      this.isShowMore = true;
    },

    //点击结算弹出密码
    pay() {
      this.passwordshow = true;
    },

    //匹配密码
    inputPassword(key) {
      // 

      let pwd = this.userPassword + key;
      // 

      if (pwd.length === 6) {
        this.passwordshow = false;

        //模拟密码验证
        this.$toast.loading({
          message: "正在支付中...",
          forbidClick: true,
          duration: 0,
        });

        setTimeout(() => {
          this.$toast.clear();

          // 判断密码是否一致
          if (pwd === this.password) {
            //发起结算订单请求
            this.userPassword = "";

            //获取参数
            let data = {
              sids: this.sids,
              phone: this.selectAddress.tel,
              address: this.selectAddress.address,
              receiver: this.selectAddress.name,
            };
            // 

            this.axios({
              method: "post",
              url: "/pay",
              data,
            })
              .then((res) => {
                // 

                if (res.data.code === 700) {
                  return this.$router.push({ name: "Login" });
                }

                this.$toast(res.data.msg);

                if (res.data.code === 60000) {
                  //跳转指定页面
                  setTimeout(() => {
                    this.$router.push({ name: "Myorder" });
                  }, 2000);
                }
              })
              .catch((err) => {
                
              });
          } else {
            this.$toast("支付失败，密码错误");
            this.passwordshow = true;
            this.userPassword = "";
          }
        }, 2000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

//地址
.address {
  width: 320px;
  background-color: #fff;
  border-radius: 10px;
  margin: 50px auto 6px auto;
  padding: 10px 14px;
}

.edit {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.choice {
  width: 100px;
  height: 24px;
  margin-left: auto;
  background-color: #f6f6f6;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  display: flex;
}

.choicebox {
  width: 60px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #999999;
  border-radius: 20px;
  &.next {
    width: 70px;
    color: #fff;
    background-color: #37343b;
  }
}

.data {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.databox {
  width: 100%;
  padding: 4px 0 6px 0;
  display: flex;
  align-items: center;
}

.name {
  font-size: 14px;
  font-weight: 600;
  padding: 0 14px 0 0;
}

.iphone {
  font-size: 14px;
  padding: 0 14px 0 0;
}

//订单信息
.news {
  width: 320px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 14px auto 0 auto;
  padding: 10px 14px 0 14px;
}

.title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
}

.showmore {
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #999999;
  padding: 10px 0 0 0;
  text-align: center;
}

//合计
.total {
  width: 320px;
  background-color: #fff;
  border-top: 1px dashed #999999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: auto;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.time {
  width: 100%;
  height: 20px;
  line-height: 20px;
  color: #999999;
}

.totalbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quantity {
  width: 100px;
  height: 30px;
  line-height: 30px;
}

.money {
  width: 100px;
  height: 30px;
  line-height: 30px;
  & span {
    color: #dcab77;
    font-size: 16px;
    font-weight: 600;
  }
}

/deep/.van-button--default {
  color: #fff;
  background-color: #323233;
  border-color: #323233;
}

/deep/.van-button--block {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
}

//缺角
.circle {
  position: relative;
  bottom: 70px;
  width: 20px;
  height: 20px;
  background-color: #eaeaea;
  border-radius: 50%;
}

.circle-left {
  right: 22px;
}

.circle-right {
  left: 304px;
}

// 选择地址页面
.popup {
  padding: 18px 20px;
  font-size: 14px;
  font-weight: 600;
}

/deep/.van-address-list {
  padding: 0;
}

/deep/.van-address-item {
  padding: 16px 14px;
}

/deep/.van-address-item__edit {
  right: 0;
}

/deep/.van-address-item .van-radio__icon--checked .van-icon {
  background-color: #37343b;
  border-color: #37343b;
}

/deep/.van-button--danger {
  background-color: #37343b;
  border-color: #37343b;
  width: 100%;
  margin: auto;
}

/deep/.van-tag--danger {
  background-color: #1989fa;
}

/deep/.van-button--block {
  right: 0;
}

.popupbox {
  overflow-y: auto;
  height: 190px;
  padding-bottom: 50px;
}

//支付
.tit {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}
</style>